<template>
    <div>
        <article class="weui-article">
            <section>
                <h2 class="title">{{question.TITLE}}</h2>
                <section>
                    <!--<h3>1.1 节标题</h3>-->
                    <p class="weui-a11y-combo">
                      <span  id="txt1"  class="weui-a11y-combo__content"  aria-hidden="true">
                        {{question.DESCRIPTION}}
                      </span>
                    </p>
                    <p class="question-img-wrap">
                        <img v-if="question.IMAGE_URL!=null" v-bind:src="question.IMAGE_URL" >
                    </p>
                </section>
            </section>
        </article>
        <!-- 单选 -->
      
        <div class="weui-cells__title"> {{question.QUESTION_TYPE}}</div>

        <div class="weui-cells__group weui-cells__group_form" v-if="question.QUESTION_TYPE=='单选题'">
            <div class="weui-cells weui-cells_radio">
                <label v-for="el in question.OPTIONS" :key="el.OPTION_CODE" class="weui-cell weui-cell_active weui-check__label" v-bind:for="el.OPTION_CODE" >
                    <div class="weui-cell__bd">
                        <p>{{el.OPTION_CODE}}.{{el.CONTENT}}</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="radio1"  v-bind:id="el.OPTION_CODE" v-model="singleCheckOption" v-bind:value="el.OPTION_CODE"/>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>
        </div>
        <div class="weui-cells__group weui-cells__group_form" v-if="question.QUESTION_TYPE=='判断题'">
            <div class="weui-cells weui-cells_radio">
                <label v-for="el in question.OPTIONS" :key="el.OPTION_CODE" class="weui-cell weui-cell_active weui-check__label" v-bind:for="el.OPTION_CODE" >
                    <div class="weui-cell__bd">
                        <p>{{el.OPTION_CODE}}.{{el.CONTENT}}</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="radio1"  v-bind:id="el.OPTION_CODE" v-model="singleCheckOption" v-bind:value="el.OPTION_CODE"/>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>
        </div>
        <!-- 多选 -->
        <div class="weui-cells__group weui-cells__group_form" v-if="question.QUESTION_TYPE=='多选题'">
            <div class="weui-cells weui-cells_checkbox">
                <label v-for="el in question.OPTIONS" :key="el.OPTION_CODE" class="weui-cell weui-cell_active weui-check__label" v-bind:for="el.OPTION_CODE">
                    <div class="weui-cell__bd">
                        <p>{{el.OPTION_CODE}}.{{el.CONTENT}}</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="checkbox" class="weui-check" name="checkbox1" v-bind:id="el.OPTION_CODE" v-model="multCheckedOption" v-bind:value="el.OPTION_CODE" />
                        <i class="weui-icon-checked"></i>
                    </div>
                </label>                
            </div>
        </div>  

        <div class="button-sp-area cell">
            <a href="javascript:" role="button" @click="onShowAnswer()"  class="weui-btn_cell weui-btn_cell-default">{{answerTitle}}</a>
        </div>
        
        <div style="height:80px"></div>
    

     <!--    <div class="button-sp-area" style="position:fixed; bottom: 0; left: 50%; margin-left: -150px;">
            <a v-bind:class="{'weui-btn_disabled':currectPage<=1}" href="javascript:" role="button"  @click="onPrePage()" class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea">上一题</a>
            <a href="javascript:" role="button" v-on:click="onSelectPage" class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea">{{currectPage}}/{{pageTotal}}</a>
            <a v-bind:class="{'weui-btn_disabled':(currectPage>=pageTotal)}" href="javascript:" role="button" @click="onNextPage()" class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea">下一题</a>
        </div> 
 -->
        

        <div class="page__ft">
            <div class="weui-footer weui-footer_fixed-bottom ">
                 
            <a v-bind:class="{'weui-btn_disabled':currectPage<=1}" href="javascript:" role="button"  @click="onPrePage()" class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea">上一题</a>
            <a href="javascript:" role="button" v-on:click="onSelectPage" class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea">{{currectPage}}/{{pageTotal}}</a>
            <a v-bind:class="{'weui-btn_disabled':(currectPage>=pageTotal)}" href="javascript:" role="button" @click="onNextPage()" class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea">下一题</a>

            </div>
        </div>


        <!--BEGIN dialog2-->
        <div class="js_dialog" role="dialog"  v-if="isSelectPagePopShow" aria-hidden="true" aria-modal="true" aria-labelledby="js_title2" id="iosDialog2" >
            <div class="weui-mask" @click="isSelectPagePopShow=false"></div>
            <div class="weui-dialog">
              <!--   <div class="weui-dialog__hd">
                    选择页码
                </div> -->
                <div class="weui-dialog__bd">
                  <label for="js_input1" class="weui-cell weui-cell_active" id="js_cell">
                    <div class="weui-cell__hd"><span class="weui-label">页码</span></div>
                    <div class="weui-cell__bd weui-flex">
                        <input   v-model="tempPage" class="weui-input" type="tel"  v-on:input="tempPage= tempPage.replace(/\D/g,'')" maxlength="16">
                        <button id="js_input_clear" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" wah-hotarea="touchend">
                          <i class="weui-icon-clear"></i>
                        </button>
                    </div>
                  </label>
                </div>
                <div class="weui-dialog__ft">
                 <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary" v-on:click="onOkSelectPage()">确定</a>
                </div>
            </div>
        </div>
        <!--END dialog2-->
    </div>

</template>

<script>

export default {
    data () {
        return {
            isSelectPagePopShow:false,
            pageTotal  : 20 ,
            currectPage:1,
            isShowAnswer:false ,
            answerTitle:"显示答案" ,
            classCode:'',
            serialNo:1  ,
            question:{} ,
            tempPage:1,
            multCheckedOption:[],
            singleCheckOption:''
        }
    },
    methods: {
        onSelectPage(){
             this.isSelectPagePopShow = true;
        },
        onSelectedPage(e){
            console.log(e.target.value) // 选择项的value
            this.isSelectPagePopShow = false;
        },
        onShowAnswer(){
            this.isShowAnswer = !this.isShowAnswer;
            if(this.isShowAnswer){
                this.answerTitle=this.question.ANSWER;
            }else{
                this.answerTitle="显示答案";
            }
        },
        onPrePage(){
            if(this.currectPage<=1){
                 return;
            }
            this.currectPage--;
            this.serialNo = this.currectPage;    
            this.GetQuestion ();
            this.answerTitle="显示答案";
            this.isShowAnswer = false;
            this.multCheckedOption = [];
            this.singleCheckOption="";
        },
        onNextPage(){
            if(this.currectPage>=this.pageTotal) {
                return;
            }
            this.currectPage++;
            this.serialNo = this.currectPage;    
            this.GetQuestion ();
            this.answerTitle="显示答案";
            this.isShowAnswer = false;
            this.multCheckedOption = [];
            this.singleCheckOption="";
        },
        GetQuestion () {

            this.$api.Training.GetQuestionByClassAndNo({CLASS_CODE:this.classCode,SERIAL_NO:this.serialNo}).then((msg)=>{
                if(msg.data.R){
                    this.question = msg.data.D;
                }
                else{
                    this.$weui.alert(msg.data.I);
                }
            }).catch((response)=> {
                // 响应错误回调
                this.$weui.alert("调用http错误，代码:" + response.message);
            });  

        },
        onOkSelectPage(){
            this.serialNo    = this.tempPage;    
            this.currectPage = this.tempPage;    
            this.GetQuestion ();
            this.isSelectPagePopShow = false;
        }
    },
    created  () {
        document.title="考题"  
        this.classCode=this.$route.query.classCode;
        this.pageTotal=this.$route.query.QUESTION_NUMBER;
        this.GetQuestion ();
    }
}

</script>

<style>
.question-img-wrap{
    text-align: center;
}
.question-img-wrap img{
    width: 256px;
}
.page-select{
    width: 100%;
    padding: 10px;
}
.button-sp-area {
    margin: 15px auto;
    padding: 15px;
    text-align: center;
}
.weui-wa-hotarea{
    margin-left: 10px;
    margin-right: 10px;
}
</style>